<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-17 11:04:13
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-24 14:49:46
-->
<template>
  <div class="mainCon">
    <div class="reminderBox">
      <ul class="reminder clear" v-if="loginType === 'XM'">
        <li style="width: 335px">
          <span>1</span>
          <div slot="content">下载《工资表模板》，填写本月员工工资信息</div>
        </li>
        <li class="arrowRight">
          <img src="../../../static/img/icon2.png" alt="" />
        </li>
        <li style="width: 235px">
          <span>2</span>
          <div>员工核对工资并签字、按手印</div>
        </li>
        <li class="arrowRight">
          <img src="../../../static/img/icon2.png" alt="" />
        </li>
        <li style="width: 250px">
          <span>3</span>
          <div>每月将已签章的工资表拍照上传</div>
        </li>
      </ul>
    </div>
    <attach-record-table
      @goHistory="goHistory"
      uploadType="SMALL_PROJECT_SALARY"
      :loginType="loginType"
      :projectId="projectId"
      :showHistory="showHistory"
    ></attach-record-table>
  </div>
</template>

<script>
import attachRecordTable from './attachRecordTable'

export default {
  name: 'salaryAttachRecord',
  components: {
    attachRecordTable,
  },
  props: {
    showHistory: {
      type: Boolean,
      default: false,
    },
    projectId: {
      type: String,
      default: '',
    },
    oldUrl: {
      type: String,
      default: '',
    },
    backPath: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loginType: '',
    }
  },
  created() {
    if (
      this.$store.state.userType === 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType === 'LABOR_ADMINISTRATOR' ||
      this.$store.state.userType === 'FENBAO_MANAGER'
    ) {
      this.loginType = 'XM'
    }
  },
  methods: {
    goHistory() {
      const path = '/home/salaryDf/companySalaryBatchListPage'
      this.$router.push({
        path,
        query: {
          backPath: this.backPath,
          oldUrl: this.oldUrl,
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: this.oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
}
.reminderBox {
  padding: 24px 24px 0;
  ul {
    height: 38px;
    font-size: 0;
    margin-bottom: 36px;
    li {
      float: left;
      position: relative;
      padding: 0 10px;
      height: 100%;
      span {
        display: inline-block;
        text-align: center;
        background: #3c3d49;
        color: #fff;
        height: 22px;
        line-height: 22px;
        width: 22px;
        font-size: 14px;
        border-radius: 50%;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        margin-top: -11px;
        left: 10px;
      }
      div {
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .arrowRight {
      width: calc((100% - 820px) / 2);
      text-align: center;
      line-height: 100%;
      background: url('./../../../static/img/icon1.png') center repeat-x;
      img {
        height: 14px;
        width: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -7px;
        margin-left: -5px;
      }
    }
  }
}
</style>
